<script setup lang="ts">
import {IconifyIcon} from '@iconify/vue'
import {IconTypeEnum} from './icon-type-enum.ts'
import StIconIconify from '../StIconIconify'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StIcon',
})

/**
 * 组件参数
 */
withDefaults(
  defineProps<{
    // 图标
    icon?: IconifyIcon | string;
    // 图标类型
    iconType?: IconTypeEnum;
    // 图标样式
    style?: Partial<CSSStyleDeclaration> | string;
    // 图标样式类名
    className?: string | string[];
  }>(),
  {
    icon: '',
    iconType: IconTypeEnum.ICONIFY,
    styles: {},
    className: '',
  }
)
</script>

<template>
  <StIconIconify
    v-if="iconType === IconTypeEnum.ICONIFY"
    class="st-icon"
    :class="className"
    :icon="icon"
    :style="style"
  />
  <span
    v-else-if="iconType === IconTypeEnum.TEXT"
    class="st-icon"
    :class="className"
    :style="style as Record<string, any>"
  >{{ icon }}</span>
  <img
    v-else-if="iconType === IconTypeEnum.LINK"
    class="st-icon"
    :class="className"
    :src="icon as string"
    :style="style as Record<string, any>"
    alt=""
  />
  <span
    v-else-if="iconType === IconTypeEnum.UNICODE"
    class="st-icon"
    :class="className"
    :style="style as Record<string, any>"
  >{{ icon }}</span>
  <span
    v-else-if="iconType === IconTypeEnum.FONT_CLASS"
    class="st-icon"
    :class="className"
    :style="style as Record<string, any>"
  ></span>
  <svg
    v-else-if="iconType === IconTypeEnum.SYMBOL"
    class="st-icon"
    :class="className"
    :style="style as Record<string, any>"
    aria-hidden="true"
  >
    <use v-bind="{'xlink:href': icon as string}"></use>
  </svg>
</template>

<style scoped>
.st-icon {
  display: inline-block;
  vertical-align: middle;
  color: inherit;
}
</style>
